<!--
 * @Description: 
 * @Date: 2023-05-16 09:12:36
 * @Author: Lenle
 * @LastEditors: Lenle
 * @LastEditTime: 2023-05-22 17:50:10
 http://www.cjienc.com:4001/api/jsc/zyb/yjh/hdt?plat_key=684308a6a5cbda36e9eb994844f33544b8d2ec1cdeb6ca00c5f3cc1b9376370d
 get
-->
<script>
import { maxBy as LodashMaxBy } from "lodash";
export default {
  name: "WaterLevelScale",
  components: {},
  props: {
    result: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      insOfChart: null,
      coverwidth: []
    };
  },
  computed: {},
  created() { },
  mounted() {
  },
  methods: {
    hypotenuse(long, angle) {
      //根据斜边长和角度计算对边和邻边
      var radian = ((2 * Math.PI) / 360) * angle;
      return {
        b: Math.sin(radian) * long, //对边
        a: Math.cos(radian) * long //邻边
      };
    },
    initChart() {
      const maxWidthObj = LodashMaxBy(this.result, (o) => {
        return o[6]
      });
      // 比例系数
      const maxWidthReal = maxWidthObj[6] / 30
      if (!this.result) {
        return;
      }
      const aAxisDeg = 0;
      const grid = this.hypotenuse(60, 30);
      const gridY = (window.innerWidth > 1920 ? grid.a : grid.a - 30);
      const that = this;
      // 绘制前面
      const CubeFront = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0
        },
        /* buildPath: function (ctx, shape) {
          const { x, w, y } = shape;
          // 计算方块的第二个点的坐标
          const x2 = x + w;

          const infoX2 = that.hypotenuse(x2, aAxisDeg);
          // infoX2.b -> 0  infoX2.a -> x2
          const infoX1 = that.hypotenuse(x, aAxisDeg);
          // infoX.b -> 0  infoX.a -> x
          const info2 = that.hypotenuse(40, 60);
          that.coverwidth.push(infoX2.a-infoX1.a);
          ctx
            .moveTo(infoX1.a + 5, infoX1.b + gridY + (maxWidthReal - y) / 2 )
            .lineTo(infoX1.a + 5, infoX1.b + gridY + y)
            .lineTo(infoX2.a + 5, infoX2.b + gridY + y)
            .lineTo(infoX2.a + 5, infoX2.b + gridY + (maxWidthReal - y) / 2 )
            .closePath();
        } */

        buildPath: function (ctx, shape) {
          const { x, w, y } = shape;
          // 计算方块的第二个点的坐标
          const x2 = x + w;
          const infoX2 = that.hypotenuse(x2, aAxisDeg);
          // infoX2.b -> 0  infoX2.a -> x2
          const infoX1 = that.hypotenuse(x, aAxisDeg);
          // infoX.b -> 0  infoX.a -> x
          const info2 = that.hypotenuse(40, 60);
          that.coverwidth.push(infoX2.a-infoX1.a);
          let py = 100
          let chazhi = (maxWidthReal - y) / 2;
          ctx
            .moveTo(infoX1.a,gridY+20)
            .lineTo(infoX1.a,gridY + 20 +y/2 )
            .lineTo(infoX2.a,gridY + +20+y/2)
            .lineTo(infoX2.a,  gridY +20 -y/2)
            .lineTo(infoX1.a, gridY + 20 -y/2)
            .closePath();
        }
      });
      echarts.graphic.registerShape("CubeFront", CubeFront);

      var chartDom = this.$refs.CustomBarRef;
      this.insOfChart = echarts.init(chartDom);
      // let l = 0;
      // x1,x2, height,label
      const data = this.result.map(function (item, index) {
        // const arr = [l, l + item[0], item[1], item[2]];
        // l += item[0];
        return {
          value: item,
          // selected: true,
          itemStyle: {
            color: "rgba(104, 184, 227, 1)"
          }
        };
      });
      if (window.innerWidth <= 1920) {
        const option1920 = {
          title: {
            show: false,
            text: "航\n道\n尺\n度",
            left: 10,
            top: 30,
            textStyle: {
              color: "#fff",
              lineHeight: 30
            }
          },
          tooltip: {
            textStyle: {
              align: "left"
            }
          },

          xAxis: {
            scale: true,
            position: "top",
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: { show: false },
            splitLine: { show: false }
          },
          yAxis: {
            inverse: true,
            boundaryGap: [0, "40%"],
            show: false,
            splitLine: { show: false }
          },
          grid: {
            top: 10, //16,
            bottom: 60,
            //left: "8%",
            left : that.$parent.cj_qd - 40+"px",
            //right: "11%",
            left : that.$parent.cj_qd - 40+"px",
            containLabel: false
          },
          series: [
            {
              type: "custom",
              selectedMode: "multiple",
              renderItem: function (params, api) {
                const i = params["dataIndex"];
                var yValue = api.value(6);
                const location = api.coord([api.value(0), api.value(1)]);
                var size = api.size([api.value(1) - api.value(0), yValue]);
                var style = api.style();
                const shape = {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: size[1] /30,
                  x2: location[0] + size[0],
                  w: size[0],
                  xAxisPoint: api.coord([api.value(0), api.value(1)])
                };
                const infoX1 = that.hypotenuse(shape.x, aAxisDeg);
                style["opacity"] = 1;
                style["fill"] = "rgba(255,255,255,0)";
                // 取下标 4 的原因：数据返回了对应的颜色值
                const color = that.result[i][4]
                  ? that.result[i][4]
                  : "rgba(104, 184, 227, 1)";
                const stroke = that.result[i][10]
                  ? that.result[i][10]
                  : "#D4E8FF";
                const itemData = that.result[i][5];
                if (!itemData) {
                  return;
                }
                const children = [
                  {
                    type: "text",
                    x:
                      itemData.zdwz - itemData.qdwz < 20 ? shape.x - 13 : shape.x,
                    y: infoX1.b + gridY + shape.y/2 + 20,
                    style: {
                      text: itemData.qdjc.replace("（", "•").replace("）", ""),
                      fill: "#fff",
                      width: 12,
                      lineHeight: 14,
                      textAlign: "left",
                      overflow: "break"
                    },
                    textConfig: {}
                  },
                  {
                    // 前平面
                    type: "CubeFront",
                    shape: shape,
                    style: {
                      fill: color,
                      stroke: stroke,
                      lineWidth:2,
                      opacity: 0.9
                    },
                    select: {
                      style: { fill: "#ffec3d" }
                    }
                  }
                ];
                if (that.result && i === that.result?.length - 1) {
                  const x =
                    itemData.zdwz - itemData.qdwz < 20 ? shape.x - 13 : shape.x;
                  children.push({
                    type: "text",
                    x: x + shape.w,
                    y: infoX1.b + gridY + shape.y/2 + 20,
                    style: {
                      text: itemData.zdjc.replace("（", "•").replace("）", ""),
                      fill: "#fff",
                      width: 12,
                      lineHeight: 14,
                      textAlign: "left",
                      overflow: "break"
                    },
                    textConfig: {}
                  });
                }
                return {
                  type: "group",
                  children: children
                };
              },

              label: {
                show: true,
                position: ["48%", 240],
                formatter: function (params) {
                  const name = params.name.split("").join("\n");
                  return name;
                }
              },
              dimensions: [
                "起点位置(km)",
                "终点位置(km)",
                "航道水深(m)",
                "起点简称",
                "颜色",
                "数据",
                "航道宽度(m)",
                "尺度预警数量",
                "航道长度(km)"
              ],
              encode: {
                x: [0, 1],
                y: 2,
                tooltip: [2, 6, 8, 7],
                itemName: 9
              },
              data: data
            }
          ]
        };
        this.insOfChart.setOption(option1920, true);
      } else {
        const option = {
          title: {
            show: false,
            text: "航\n道\n尺\n度",
            left: 10,
            top: 30,
            textStyle: {
              color: "#fff",
              lineHeight: 30
            }
          },
          tooltip: {
            textStyle: {
              align: "left"
            }
          },

          xAxis: {
            scale: true,
            position: "top",
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: { show: false },
            splitLine: { show: false }
          },
          yAxis: {
            inverse: true,
            boundaryGap: [0, "40%"],
            show: false,
            splitLine: { show: false }
          },
          grid: {
            top: gridY, //16,
            bottom: 60,
            //left: "19%",
            left : that.$parent.cj_qd -40 +"px",
            //right: "22%",
            right:that.$parent.cj_qd -40+"px",
            containLabel: false
          },
          series: [
            {
              type: "custom",
              selectedMode: "multiple",
              renderItem: function (params, api) {
                const i = params["dataIndex"];
                var yValue = api.value(6);
                const location = api.coord([api.value(0), api.value(1)]);
                var size = api.size([api.value(1) - api.value(0), yValue]);
                var style = api.style();
                const shape = {
                  api,
                  // 不知道啥用
                  // xValue: api.value(0),
                  // 不知道啥用 2
                  // yValue: api.value(1),
                  // 每一段航道的起点
                  x: location[0],
                  // 每一段河道的长度
                  w: size[0],
                  // 航道的宽度
                  y: size[1] / 30,
                  // x2: (location[0] + size[0]),                  
                  xAxisPoint: api.coord([api.value(0), api.value(1)])
                };
                const infoX1 = that.hypotenuse(shape.x, aAxisDeg);
                style["opacity"] = 1;
                style["fill"] = "rgba(255,255,255,0)";
                const color = that.result[i][4]
                  ? that.result[i][4]
                  : "rgba(104, 184, 227, 1)";
                  
                  const stroke = that.result[i][10]
                  ? that.result[i][10]
                  : "#D4E8FF";
                const itemData = that.result[i][5];
                if (!itemData) {
                  return;
                }
                const children = [
                  {
                    type: "text",
                    x:
                      itemData.zdwz - itemData.qdwz < 20 ? shape.x - 13 : shape.x,
                    y: infoX1.b + gridY + shape.y/2 + 30,
                    style: {
                      text: itemData.qdjc.replace("（", "•").replace("）", ""),
                      fill: "#fff",
                      width: 12,
                      lineHeight: 14,
                      textAlign: "left",
                      fontSize: 14,
                      overflow: "break"
                    },
                    textConfig: {}
                  },
                  {
                    // 前平面
                    type: "CubeFront",
                    shape: shape,
                    style: {
                      fill: color,
                      stroke: stroke,
                      lineWidth: 1,
                      opacity: 0.9
                    },
                    select: {
                      style: { fill: "#ffec3d" }
                    }
                  }
                ];
                if (that.result && i === that.result?.length - 1) {
                  const x =
                    itemData.zdwz - itemData.qdwz < 20 ? shape.x - 13 : shape.x;
                  children.push({
                    type: "text",
                    x: x + shape.w,
                    y: infoX1.b + gridY + shape.y/2 + 30,
                    style: {
                      text: itemData.zdjc.replace("（", "•").replace("）", ""),
                      fill: "#fff",
                      width: 12,
                      lineHeight: 14,
                      textAlign: "left",
                      fontSize: 14,
                      overflow: "break"
                    },
                    textConfig: {}
                  });
                }
                return {
                  type: "group",
                  children: children
                };
              },
              label: {
                show: true,
                position: ["48%", 240],
                formatter: function (params) {
                  const name = params.name.split("").join("\n");
                  return name;
                }
              },
              dimensions: [
                "起点位置(km)",
                "终点位置(km)",
                "航道水深(m)",
                "起点简称",
                "颜色",
                "数据",
                "航道宽度(m)",
                "尺度预警数量",
                "航道长度(km)"
              ],
              encode: {
                x: [0, 1],
                y: 2,
                tooltip: [2, 6, 8, 7],
                itemName: 9
              },
              data: data
            }
          ]
        };
        this.insOfChart.setOption(option, true);
      }

      this.insOfChart.on("mouseover", params => {
        // console.log(params);
      });
    }
  }
};
</script>
<template>
  <div id="CustomBar" ref="CustomBarRef"></div>
  <div class="legend">
    <span>航道尺度</span>
  </div>
</template>
<style lang="less" scoped>
#CustomBar {
  width: 100%;
  height: 100%;
}
.legend {
  position: absolute;
  padding: 20px 5px;
  color: #42F4FF;
  font-size: 20px;
  background-color: rgba(101, 127, 147, 0.5);
  top: 20px;
  left: 30px;
  writing-mode: tb;
  border-radius: 10px;
  letter-spacing: 4px;
}
</style>